<style rel="stylesheet/scss" lang="scss" scoped>
  .mid {
    line-height: 140px;
  }

  .alignR {
    margin: 0 !important;
    height: 0;
    .btn-request {
      position: relative;
      top: -90px;
      width: 120px;
    }
  }

  .col-20 {
    font-size: 14px;
    color: #333;
    line-height: 300%;
    width: 20%;
  }

  .el-tabs-cert {
    .el-tabs__content {
      padding: 20px !important;
    }
  }
</style>
<template>
  <div class="app-container calendar-list-container">
    <upload-image ref="uploadImage" :uploadId="uploadImageId" :imageUrls="imageUrls"
                  @getImages="getImages"></upload-image>
    <upload-file :uploadId="uploadFileId" :files="imageUrls" @getFiles="getFiles"></upload-file>
    <el-button type="primary" @click="getImageList">主要按钮</el-button>
    <el-button type="primary" @click="clearImageList">清空图片</el-button>
  </div>
</template>
<script>
  import {
    mapGetters
  } from 'vuex';
  import BasicForm from '@/components/BasicForm/index'

  export default {
    name: 'user',
    components: {
      BasicForm,
    },
    data() {
      return {
        uploadImageId: 'uploadImageId',
        uploadFileId: 'uploadFileId',
        imageUrls: []
      }
    },
    mounted() {
      this.imageUrls = [{ id: 1, url: 'group1/M00/00/01/CpqLZVuHUWKEEj-LAAAAAEEjtQo426.jpg' }];
    },
    computed: {
      ...mapGetters([
        'elements',
        'language'
      ])
    },
    methods: {
      getImages(files) {
        console.log(files)
        if (files.length > 0) {
          const fileIds = files.map(file => file.id);
          console.log(fileIds)
        }
      },
      getFiles(files) {
        console.log(files)
        if (files.length > 0) {
          const fileIds = files.map(file => file.id);
          console.log(fileIds)
        }
      },
      getImageList() {
        console.log(this.$refs.uploadImage.imageList)
      },
      clearImageList() {
        this.$refs.uploadImage.clearFiles()
      }
    }
  }
</script>
